<template>
	<el-card class="box-card form_item" :style="style">
		<div slot="header" class="clearfix">
			<img v-if="loginShow" src="../../assets/img/icon_erweima.png" @click="erweimaClick" class="icon_img" alt />
			<img v-if="phoneShow" src="../../assets/img/login_phone.png" class="icon_img_phone" @click="phoneClick" />
			<div v-if="showRefresh" class="mask" @click="againGetImgCode">该二维码失效，请点击重新获取登录二维码</div>
		</div>
		<el-form label-width="60px" :rules="rules" :model="logoData" ref="login">
			<div v-if="loginShow">
				<div class="wrap_icon">
					<i class="icon_position el-icon-coordinate"></i>
					<el-input v-model="logoData.username" class="input_login" type="text" placeholder="账户、邮箱或手机号"></el-input>
				</div>
				<div class="wrap_icon">
					<i class="icon_position el-icon-lock"></i>
					<el-input class="input_login" placeholder="请输入密码" v-model="logoData.passwd" show-password></el-input>
					<!-- <el-input class="input_login" type="password" placeholder="密码"></el-input> -->
				</div>
				<div class="wrap_flex wrap_icon">
					<el-input v-model="logoData.imgCode" class="input_login" style="width: 230px;" type="text" placeholder="请输入图片验证码"></el-input>
					<div><img @click="imageCode" :src="imgCodeUrl" alt /></div>
				</div>
				<div class="login_btn"><el-button type="primary" class="input_login" @click="login" :loading="loading">登录</el-button></div>
				<el-alert v-if="showMsg" :title="msg" :type="msgType" show-icon></el-alert>
				<slot name="default"></slot>
			</div>
			<div v-if="phoneShow">
				<img :src="qrCodeUrl" class="imgChat" alt="" />
				<div class="tipChat">请使用微信扫描二维码登录</div>
			</div>
		</el-form>
	</el-card>
</template>

<script>
import Cookie from 'js-cookie';
import { adminLogin, imgCode, imgCodeChat, loginChat } from '../../server/index';
var qrcodeTimer, looperTimer;
export default {
	name: 'login',
	data() {
		return {
			imgCodeUrl: '',
			loading: false,
			showMsg: false,
			msg: '',
			msgType: 'success',
			token: '',
			tokenImg: '',
			loginShow: true,
			phoneShow: false,
			showRefresh: false,
			qrCodeUrl: '',
			strCode: '',
			// logoData: {
			// 	username: '111111',
			// 	passwd: '111111',
			// 	imgCode: '1806'
			// },
			logoData: {
				username: '',
				passwd: '',
				imgCode: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}
				],
				passwd: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				]
			},
			fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
			url: ''
		};
	},
	props: {
		width: {
			default: '446px'
		},
		// url: {
		//   type: String,
		//   default: "Admin/account/login"
		// },
		go: {
			type: String,
			default: 'home'
		}
	},
	computed: {
		style() {
			return {
				width: this.width
			};
		}
	},
	mounted() {
		this.imageCode();
	},
	created() {
		let that = this;
		document.onkeypress = function(e) {
			var keycode = document.all ? event.keyCode : e.which;
			if (keycode == 13) {
				that.login(); // 登录方法名
				return false;
			}
		};
	},
	methods: {
		// 验证码
		imageCode() {
			this.http.request({
				url: imgCode,
				method: 'GET',
				success: res => {
					this.imgCodeUrl = 'data:image/png;base64,' + res.capImg;
					this.tokenImg = res.token;
					// Cookie.set('Token', res.token);
				}
			});
		},
		login() {
			const _this = this;
			_this.loading = true;
			if (!_this.logoData.username) {
				_this.$message({
					offset: '200',
					message: '请输入账号'
				});
				_this.loading = false;
				return;
			}
			if (!_this.logoData.passwd) {
				_this.$message({
					offset: '200',
					message: '请输入密码'
				});
				_this.loading = false;
				return;
			}
			if (!_this.logoData.imgCode) {
				_this.$message({
					offset: '200',
					message: '请输入验证码'
				});
				_this.loading = false;
				return;
			}
			let dataMsg = {
				account: _this.logoData.username,
				password: _this.logoData.passwd,
				captcha: _this.logoData.imgCode,
				token: _this.tokenImg
			};
			this.http.request({
				url: adminLogin,
				data: dataMsg,
				success: function(res) {
					Cookie.set('Token', res.token);
					setTimeout(() => {
						_this.loading = false;
						_this.$router.push({
							path: _this.go
						});
					}, 1500);
				},
				error: function(res) {
					_this.$message({
						offset: '200',
						message: res.msg
					});
					_this.loading = false;
				}
			});
		},
		// 二维码登录
		phoneClick() {
			const _this = this;
			_this.loginShow = true;
			_this.phoneShow = false;
			_this.showRefresh = false;
			clearInterval(looperTimer);
			clearInterval(qrcodeTimer);
		},
		erweimaClick() {
			const _this = this;
			_this.loginShow = false;
			_this.phoneShow = true;
			// _this.showRefresh = true;
			_this.getChatImg();
		},
		// 扫描二维码
		getChatImg() {
			this.http.request({
				url: imgCodeChat,
				method: 'GET',
				success: res => {
					this.qrCodeUrl = res.qrCodeUrl;
					this.strCode = res.str;
					this.countDownAction();
				}
			});
		},
		// 轮询接口
		loginChatImg() {
			const _this = this;
			_this.http.request({
				url: loginChat,
				data: { str: _this.strCode },
				success: function(res) {
					Cookie.set('Token', res.token);
					setTimeout(() => {
						_this.loading = false;
						_this.$router.push({
							path: _this.go
						});
					}, 1500);
					clearInterval(looperTimer);
					clearInterval(qrcodeTimer);
				}
			});
		},
		// 点击获取二维码图片
		againGetImgCode() {
			const _this = this;
			_this.showRefresh = false;
			_this.getChatImg();
		},
		// 倒计时
		countDownAction() {
			const _this = this;
			qrcodeTimer = setInterval(function() {
				_this.showRefresh = true;
				clearInterval(qrcodeTimer);
				clearInterval(looperTimer);
			}, 5 * 60 * 1000);

			looperTimer = setInterval(function() {
				//请求轮询接口
				_this.loginChatImg();
			}, 10000);
		}
	}
};
</script>

<style lang="less">
.imgChat {
	width: 296px;
	height: 296px;
}
.login_btn {
	margin-top: 60px;
}
.tipChat {
	font-size: 14px;
	font-weight: 400;
	color: rgba(165, 165, 165, 1);
	padding-top: 16px;
}
.el-card__body {
	padding: 10px;
	z-index: 999;
}
.icon_img {
	width: 46px;
	height: 46px;
}
.icon_img_phone {
	width: 44px;
	height: 44px;
}
.el-card.is-always-shadow {
	box-shadow: none;
}
.el-card__header {
	border: none;
	padding: 10px;
}
.form_item {
	width: 446px;
	height: 435px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(247, 247, 247, 1);
	border-radius: 20px;
	margin: 0 auto;

	.mask {
		position: absolute;
		right: 66px;
		top: 66px;
		width: 296px;
		height: 296px;
		background: rgba(255, 255, 255, 0.6);
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}
}

.clearfix {
	position: relative;
	text-align: right;
}

.input_login {
	width: 300px;
	margin-bottom: 20px;
	border: none;
}

.wrap_icon {
	position: relative;
	border: 1px solid #dedede;
	height: 40px;
	width: 85%;
	margin: 0 auto;
	margin-bottom: 20px;
	border-radius: 5px;

	.el-input__inner {
		border: none;
		outline: none;
	}
}

.icon_position {
	color: #fd572f;
	font-size: 22px;
}

.wrap_flex {
	display: flex;
	flex-direction: row;
	justify-content: center;

	img {
		width: 118px;
		height: 40px;
	}
}

.login_btn {
	.el-button {
		width: 300px;
		height: 52px;
		background: rgba(255, 21, 71, 1);
		border-radius: 12px;
		font-size: 18px;
		font-family: Arial;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}
}
</style>
